(async() => {
	function getParam(name) {
		var r = window.location.href.split('?');
		if(!r[1]) return null;
		var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
		r = r[1].match(reg);
		if(r != null) return decodeURIComponent(r[2]);
		return null;
	}

	//轮播图
	let bannerBox = document.querySelector('#bannerBox')
	let banner = bannerBox.querySelector('.banner')
	banner.innerHTML = '' //清空之前图片
	let instructs = bannerBox.querySelector('.instructs')
	instructs.innerHTML = ''
	let bannerImgs = [],instructDivs=[]
	let productId = getParam('productId')
	console.log(productId)
	let product = await (await fetch(`http://localhost:3001/product?productId=${ productId }`)).json()
	console.log(product)
	let imgs = product.imgs.split(',')
	for(let i = 0; i < imgs.length; i++) {
		((i) => {
		let bannerr = document.createElement('img')
		bannerr.src = 'http://localhost:3001' + imgs[i]
		
		bannerr.onclick = () => {
			window.open(imgs[i].url)
		}
//		banner.appendChild(bannerr)
		bannerImgs.push(bannerr)
		
		
		//插入指示器
		let instruct = document.createElement('div')
		instruct.className = 'instruct'
			instruct.onclick = () => {
				bannerPlay(i)
			}
			instructs.appendChild(instruct)
			instructDivs.push(instruct)
		})(i)
	}
	let cloneFirst = bannerImgs[0].cloneNode()
	banner.appendChild(cloneFirst)
	
		//设置banner长度
//	banner.style.width = 750 * (imgs.length + 1) + 'rem'

	let bannerIndex = 0
	let bannerTimer = 0

	function bannerPlay(i) {
		instructDivs[bannerIndex].style.background = '#fff'
		bannerIndex = i
		//修改新的焦点状态
		banner.style.marginLeft = '-' + i * 750 + 'rem'
		instructDivs[bannerIndex == bannerImgs.length ? 0 : bannerIndex].style.background = '#ff0000'
		if(bannerTimer) {
			clearTimeout(bannerTimer)
			bannerTimer = 0
		}
		if(bannerIndex == bannerImgs.length) {
			setTimeout(() => {
				bannerIndex = 0
				i = 0
				banner.className = 'banner'
				banner.style.marginLeft = '0rem'
				setTimeout(() => {
					banner.className = 'banner bannerAnmate'
				}, 100)
			}, 1000)
		}
		//开始计时轮播

		bannerTimer = setTimeout(() => {
			bannerPlay(i + 1)
		}, 5000)
	}
	bannerPlay(0)
	
	
	//点击实现弹出框
	document.querySelector('#name').innerHTML = product.name
	document.querySelector('#head4_21').innerHTML = product.name

    let max = 0,min = Infinity,skuDivs = []
    for(let i = 0; i < product.skus.length; i ++){
        let sku = product.skus[i],salePrice = sku.salePrice / 100
        if(salePrice > max) max = salePrice
        if(salePrice < min) min = salePrice

        let skuDiv = document.createElement('div')
        skuDiv.className = 'skuDiv'
        skuDiv.innerHTML = sku.props
      //  skuDiv.src ='http://localhost:3001'+ sku.imgs
        // $('#skus').appendChild(skuDiv)
        // skuDiv.addEventListener('click',event => {
        //     changeSkuIndex(i)
        // })
        skuDivs.push(skuDiv)
    }

    let skuIndex = 0
    function changeSkuIndex(index){
        skuDivs[skuIndex].className = 'skuDiv'
        skuIndex = index
        skuDivs[skuIndex].className = 'skuDiv active'
       	$('#skuImg').src = 'http://localhost:3001'+ product.skus[skuIndex].imgs
        $('#skuName').innerHTML = product.skus[skuIndex].props
        $('#skuPrice').innerHTML = product.skus[skuIndex].salePrice
    }
    changeSkuIndex(0)

    function $(flog){
        return document.querySelector(flog)
    }

    $('#price').innerHTML = `￥${min}~￥${max}`
    
    $('#changeSku').addEventListener('click',event => {
        $('#sku').style.display = 'block'
    })

    $('#skuBoxCover').addEventListener('click',event => {
        $('#sku').style.display = 'none'
    })
    $('#goCar').addEventListener('click',event => {
        let = `skuId=${product.skus[skuIndex].skuId}`
        // location.href = `./car.html?skuId=${}`
        $('#sku').style.display = 'none'
    })
	

})()